<!--
*******************************************************************************
 * Copyright © 2021-2022 VMware, Inc. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
 * in compliance with the License. You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under the License
 * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
 * or implied. See the License for the specific language governing permissions and limitations under
 * the License.
 *
 * @author: Huaqiao Zhang, <huaqiaoz@vmware.com>
 *******************************************************************************
 -->

<app-message></app-message>
<div class="container-fluid">
    <div class="row">
        <div class="px-0" [class.sidebar-shrink]="shrink" [class.sidebar]="!shrink">   
            <div class="sidebar-center font-weight-bold text-white vh-100">
                <div class="sidebar-header p-2">
                    <img src="/assets/img/bg_x.png" [class.d-none]='shrink' class="mt-2" width="35" height="34" alt="" loading="lazy">
                    <p class="float-right mt-3 mr-2">
                        <i class="fa fa-navicon fa-lg text-light" (click)="sideBarToggle()" role="button"></i>
                    </p>
                </div>
                <div class="overflow-hidden">
                    <nav class="nav flex-column">
                        <a  class="nav-link text-light" routerLink="/dashboard" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact:false}"> 
                            <i class="fa fa-tachometer fa-fw mr-5"></i> 
                            <span [class.d-none]='shrink' i18n>Dashboard</span> 
                        </a>
                        <a  class="nav-link text-light" routerLink="/system-agent" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact:false}"> 
                            <i class="fa fa-server fa-fw mr-5"></i> 
                            <span [class.d-none]='shrink' i18n>System</span>  
                        </a>
                        <a  class="nav-link text-light" routerLink="/metadata" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact:false}">
                            <i class="fa fa-cubes fa-fw mr-5"></i> 
                            <span [class.d-none]='shrink' i18n>Metadata</span>
                        </a>
                        <a  class="nav-link text-light" routerLink="/core-data" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact:false}"> 
                            <i class="fa fa-database fa-fw mr-5"></i> 
                            <span [class.d-none]='shrink' i18n>DataCenter</span>
                        </a>
                        <a  class="nav-link text-light" routerLink="/scheduler" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact:false}"> 
                            <i class="fa fa-clock-o fa-fw mr-5"></i>
                            <span [class.d-none]='shrink' i18n>Scheduler</span>                     
                        </a>
                        <a  class="nav-link text-light" routerLink="/notifications" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact:false}"> 
                            <i class="fa fa-envelope fa-fw mr-5"></i> 
                            <span [class.d-none]='shrink' i18n>Notifications</span>  
                        </a>
                        <a  class="nav-link text-light" routerLink="/rule-engine" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact:false}"> 
                            <i class="fa fa-sliders fa-fw mr-5"></i> 
                            <span [class.d-none]='shrink' i18n>RuleEngine</span>
                        </a>
                        <a  class="nav-link text-light" routerLink="/app-service" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact:false}"> 
                            <i class="fa fa-cloud-upload fa-fw mr-5"></i>
                            <span [class.d-none]='shrink' i18n>AppService</span>
                        </a>
                    </nav>
                </div>
            </div>
        </div>
        <div class="col-12">
            <div [class.center-shrink]="shrink" [class.center-no-shrink]="shrinkCenterNo" [class.center]="!shrink">
                <nav class="bg-light center-header px-3 pt-2 font-weight-bold">
                    <div class="nav-router mw-100 align-middle">
                        <h4 class="d-inline">{{pathFormat(currentNav)}}</h4>
                        
                        <!-- <h5 class="d-inline float-right "><i class="fa fa-user-circle-o mr-1"></i> <span class="">Admin</span></h5>
                        <div class="dropdown d-inline float-right mr-3">
                            <a id="dropdownLangLink" type="button" class="p-0 btn btn-link btn-sm dropdown-toggle text-decoration-none text-reset font-weight-bold" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span i18n>English</span>
                            </a>
                            <div class="dropdown-menu dropdown-menu-sm dropdown-menu-right font-weight-bold" aria-labelledby="dropdownLangLink">
                                <a class="dropdown-item disabled text-reset" href="/">English</a>
                                <a class="dropdown-item disabled text-reset" href="/zh">中文简体</a>
                            </div>
                        </div> -->
                    </div>
                    <div class="mw-100 align-middle mt-1">
                        <div class="d-inline">
                            <h6 *ngFor="let path of navChain;let i=index;" class="d-inline">
                                <a  *ngIf="i !== (navChain.length - 1)" routerLink="{{navChainMap.get(path)}}" class="text-decoration-none d-inline"> {{pathFormat(path)}} </a> 
                                <span  *ngIf="i == (navChain.length - 1)"  class="text-decoration-none d-inline"> {{pathFormat(path)}} </span> 
                                <span *ngIf="i !== (navChain.length - 1)">&gt;</span>
                            </h6> 
                        </div>
                        <!-- <h6 class="d-inline float-right"><span class="align-middle"> <i class="fa fa-power-off mr-1"></i>Logout</span></h6> -->
                   </div>
                </nav>
                <div class="center-center p-3">
                    <router-outlet></router-outlet>
                </div>
            </div>
        </div>
    </div>
</div>


